<template>
  <el-drawer
    v-model="isShow"
    :title="title"
    direction="rtl"
    size="50%"
    @close="closeHandler"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-col :span="32">
        <el-form-item label="所属小区" prop="community_code">
          <el-select clearable filterable v-model="formData.community_code" @change="communityChange">
            <el-option
              v-for="item in ApartmentList"
            :key="item.id" :label="item.name" :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="32">
        <el-form-item label="收费项目" prop="project_code">
         <el-select clearable filterable v-model="formData.project_code">
                <el-option v-for="item in buildPayList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
        </el-form-item>
      </el-col>
      <br /><br /><br /><br />
      <el-col :span="32">
        <el-form-item label="所属楼栋" prop="building_code">
           <el-select v-model="formData.building_code" size="large" @change="communityChange2">
                <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="32">
        <el-form-item label="所属房产" prop="house_code">
          <el-select clearable filterable v-model="formData.house_code">
        <el-option v-for="item in buildNUmList" :key="item.id" :label="item.name" :value="item.code">
                </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <br /><br /><br /><br />
      <el-col :span="32">
        <el-form-item label="应收金额" prop="amount_total">
          <el-input
            placeholder="请输入"
            v-model="formData.amount_total"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="32">
        <el-form-item label="实收金额" prop="amount_paid">
          <el-input
            placeholder="请输入"
            v-model="formData.amount_paid"
          ></el-input>
        </el-form-item>
      </el-col>
      <br /><br /><br /><br />
      <el-col :spna="32">
        <el-form-item label="备注信息" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            rows="6"
            placeholder="如果不是房产的收费信息,则记录在这里"
          ></el-input>
        </el-form-item>
      </el-col>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <el-button @click="isShow = false">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { reactive ,ref,toRaw} from "vue";
import { addSeekList, editSeekList, getSeekInfo } from "../../../api/seek";
import { useApartmentList } from "../../../hooks/index";
import { ElMessage } from "element-plus";
import{gethouse,getPayApi,getHhApi} from '../../../api/house'

// ===============================
const ApartmentList = useApartmentList();

// 表单form引用
const formRef = ref();

const isShow = ref(false);

// 列表更新需要通知外面，子父通信
const emit = defineEmits(["updateList"]);

// 需要添加的数据
const queryData = reactive({
  amount_paid: "",
  amount_total: "",
  building_code: null,
  community_code: "",
  house_code: "",
  remark: "",
  project_code: "",
  id:null
});
const formData = reactive({ ...queryData });
// 表单校验
const formRules = {
  community_code: [{ required: true, message: "请输入", trigger: "change" }],
  amount_paid: [{ required: true, message: "请输入", trigger: "blur" }],
  amount_total: [{ required: true, message: "请输入", trigger: "blur" }],
  remark: [{ required: true, message: "请输入", trigger: "blur" }],
};

// 关闭事件
const closeHandler = () => {
  formRef.value.resetFields()
  Object.assign(formData,{...queryData})
   delete formData.id
};

// 表单提交
const onSubmit = async () => {
  // 校验数据
  await formRef.value.validate();
  // 提交数据
  const data=toRaw(formData)
  formData.id ? await editSeekList(data).then((res)=>{
    delete formData.id
    console.log(formData);
  }) : await addSeekList(data)
  // formData.value.id ? await editSeekList(toRaw(formData.value)) : await addSeekList(toRaw(formData.value))
  // 提示成功
  ElMessage.success("添加成功");
  // ElMessage.success(formData.value.id ? "修改成功":"添加成功");
  // 关闭
  isShow.value = false;
  // 列表更新
  emit("updateList");
};
const buildingList = ref([])
//收费·项目
const buildPayList = ref([])
const buildNUmList=ref([])
const communityChange=async()=>{
  // formData.building_code = null
  const res = await gethouse(formData.community_code) //code='CM-8c63d562-199e-4dd2-b08c-55b271a00769'
  buildingList.value = res.data
  const res2 = await getPayApi(formData.community_code)
  buildPayList.value=res2.data
}
const communityChange2 =async()=>{
const res = await getHhApi (formData.building_code)
buildNUmList.value=res.data
}

// 回显数据
const replayData = async (id) => {
  const res = await getSeekInfo(id);
  console.log(res);
  Object.assign(formData, res.data);
  isShow.value = id
  isShow.value = true;
};


// 标题
const title = computed(() => {
  return formData.id ? "修改" : "添加";
});

// 暴露isShow
// ==========================
defineExpose({
  isShow,
  replayData,
});
</script>

<style scoped>
</style>